{% extends "base.html" %}

{# 标题 #}
{% block title %}通行证{% endblock %}

{# 在页面内部的js #}
{% block script %}
    <!--suppress HtmlUnknownTarget -->
    <script>
        $(document).ready(function () {
            $.ajax({
                url: "area",
                type: "get",
                dataType: "json",
                data: {
                    search: "district"
                },
                success: function (districts) {
                    for (let index in districts.data) {
                        if (districts.data.hasOwnProperty(index)) {
                            let name = districts.data[index];
                            $("#district").append("<option value=" + name + ">" + name + "</option>");
                        }
                    }
                }
            });
            $("#district").change(function () {
                let street = $("#street");
                street.empty();
                street.append("<option>请选择街道</option>");
                // 这里再进行一次ajax请求
                $.ajax({
                    url: "area",
                    type: "get",
                    dataType: "json",
                    data: {
                        search: "street",
                        district: $("#district option:selected").val()
                    },
                    success: function (streets) {
                        for (let index in streets.data) {
                            if (streets.data.hasOwnProperty(index)) {
                                let name = streets.data[index];
                                $("#street").append("<option value=" + name + ">" + name + "</option>");
                            }
                        }
                    }
                });
            });
            $("input[name='is-worker']").change(function () {
                if ($("input[name='is-worker'][value='yes']").prop("checked")) {
                    $("#company-info").show();
                } else {
                    $("#company-info").hide();
                }
            });
            $("input[name='is-stu']").change(function () {
                if ($("input[name='is-stu'][value='yes']").prop("checked")) {
                    $("#school-info").show();
                } else {
                    $("#school-info").hide();
                }
            });
            $("input[name='is-guest']").change(function () {
                if ($("input[name='is-guest'][value='yes']").prop("checked")) {
                    $("#hotel-info").show();
                } else {
                    $("#hotel-info").hide();
                }
            });

            $("#submit").click(function () {
                // 提交表单时在前端的验证过程
                // 在前端这里我只进行三个能用正则表达式的验证，其他的验证放在后台进行
                $.ajax({
                    url: "submit",
                    data: $("#info-form").val().serialize(),
                    dataType: "json",
                    type: "post",
                    beforeSend: function () {
                        // 进行简单的检查
                        let name = $("#name").val();
                        let name_regex = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\\.\s]{1,20})$/; // 中英文名字
                        if (!name_regex.test(name)) {
                            alert("姓名不符合规范！");
                            return false;
                        }

                        let id = $("#id-number").val();
                        let id_regex = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0-2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0-2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                        if (!id_regex.test(id)) {
                            alert("身份证不符合规范！");
                            return false;
                        }

                        let tel = $("#tel").val();
                        if (!/^1[3456789]\d{9}$/.test(tel)) {
                            alert("电话号码不符合规范！");
                            return false;
                        }

                        // 禁用提交按钮，防止重复提交
                        $("#submit").attr({disabled: "disabled"});
                    },
                    success: function (data) {
                        if (data.status === "success") {
                            $(':input', '#info-form')
                                .not(':button, :submit, :reset, :hidden')
                                .val('')
                                .removeAttr('checked')
                                .removeAttr('selected');

                            // 页面跳转，先做个简单的demo
                            window.location.href = "http://www.baidu.com";
                            return false;
                        }
                        else if (data.status === "error") {
                            alert(data.detail);
                        }
                    },
                    complete: function () {
                        // 恢复按钮
                        $("#submit").removeAttr("disabled");
                    },
                });

                // 这一行必须要加上！
                return false;
            });
        });
    </script>
{% endblock %}

{# 页面内部的css样式 #}
{% block style %}
    <style>
        * {
            text-align: left;
        }
    </style>
{% endblock %}

{% block body %}
    <form action={% url "permit:submit" %} class="form" method="post" id="info-form">
        {% csrf_token %}
        <div class="container h5">
            人员基本信息
        </div>
        <div class="container form">
            <div class="form-inline">
                <label for="name" class="col-5 col-form-label">姓名:</label>
                <input type="text" name="name" placeholder="一经提交无法修改" id="name" class="col-7 form-control">
            </div>

            <div class="form-inline">
                <span class="col-8 col-form-label">性别:</span>
                <input type="radio" name="sex" value="male" class="col-1 form-control" id="male">
                <label for="male" class="col-form-label">男</label>
                &emsp;
                <input type="radio" name="sex" value="female" class="col-1 form-control" id="female">
                <label for="female" class="col-form-label">女</label>
            </div>

            <div class="form-inline">
                <label for="id-type" class="col-5 col-form-label">证件类型:</label>
                <select name="id-type" id="id-type" class="col-7 form-control">
                    <option value="0">请选择证件类型</option>
                    <option value="身份证">身份证</option>
                    <option value="军官证">军官证</option>
                    <option value="护照">护照</option>
                    <option value="港澳通行证">港澳通行证</option>
                    <option value="儿童">儿童</option>
                </select>
            </div>

            <div class="form-inline">
                <label for="id-number" class="col-5 col-form-label">证件号码:</label>
                <input type="text" name="id-number" class="col-7 form-control" id="id-number" placeholder="请输入证件号码">
            </div>

            <div class="form-inline">
                <label for="tel" class="col-5 col-form-label">联系电话:</label>
                <input type="text" name="tel-number" class="col-7 form-control" id="tel" placeholder="请输入联系电话">
            </div>

            <div class="form-inline">
                <label for="is-inhabitant" class="col-8 col-form-label">是否否常住居民:</label>
                <input type="radio" name="is-inhabitant" value="yes" id="is-inhabitant" class="col-1 form-control">
                <label for="is-inhabitant" class="col-form-label">是</label>
                &emsp;
                <input type="radio" name="is-inhabitant" value="no" id="not-inhabitant" class="col-1 form-control">
                <label for="not-inhabitant" class="col-form-label">否</label>
            </div>

            <div class="form-inline">
                <label for="area-type" class="col-5 col-form-label">区域类型:</label>
                <select name="area-type" id="area-type" class="col-7 form-control">
                    <option value="" style="display: none"></option>
                    <option value="社区">社区</option>
                    <option value="村">农村</option>
                </select>
            </div>

            <div class="form-inline">
                <label for="district" class="col-5 col-form-label">现居区域:</label>
                <select id="district" name="district" class="col-7 form-control">
                    <option value="" style="display: none"></option>
                    <!-- 这里使用ajax从数据库里面动态加载 -->
                </select>
            </div>

            <div class="form-inline">
                <label for="street" class="col-5 col-form-label">现居街道:</label>
                <select name="street" id="street" class="col-7 form-control">
                    <option value="" style="display: none"></option>
                    <!-- 这里使用ajax从数据库里面加载 -->
                </select>
            </div>

            <div class="form-inline">
                <label for="address" class="col-5 col-form-label">具体地址:</label>
                <input type="text" name="address" class="col-7 form-control" id="address" placeholder="小区名,楼号,单元号,门牌号">
            </div>
        </div>

        <div class="container h5">
            来(返)沈情况
        </div>
        <div class="container form">
            <div class="form-inline">
                <label for="departure" class="col-5 col-form-label">出发地:</label>
                <input type="text" name="departure" class="col-7 form-control" id="departure">
            </div>

            <div class="form-inline">
                <label for="date" class="col-5 col-form-label">来(返)沈时间:</label>
                <input type="date" name="date" class="col-7 form-control" id="date">
            </div>

            <div class="form-inline">
                <label for="is-wu-han" class="col-8 col-form-label">是否途径武汉市:</label>
                <input type="radio" name="is-wu-han" value="yes" id="is-wu-han" class="col-1 form-control">
                <label for="is-wu-han" class="col-form-label">是</label>
                &emsp;
                <input type="radio" name="is-wu-han" value="no" id="not-wu-han" class="col-1 form-control">
                <label for="not-wu-han" class="col-form-label">否</label>
            </div>

            <div class="form-inline">
                <label for="is-wen-zhou" class="col-8 col-form-label">是否途径温州市:</label>
                <input type="radio" name="is-wen-zhou" value="yes" id="is-wen-zhou" class="col-1 form-control">
                <label for="is-wen-zhou" class="col-form-label">是</label>
                &emsp;
                <input type="radio" name="is-wen-zhou" value="no" id="not-wen-zhou" class="col-1 form-control">
                <label for="not-wen-zhou" class="col-form-label">否</label>
            </div>

            <div class="form-inline">
                <label for="is-hu-bei" class="col-8 col-form-label">是否途径湖北其他城市:</label>
                <input type="radio" name="is-hu-bei" value="yes" id="is-hu-bei" class="col-1 form-control">
                <label for="is-hu-bei" class="col-form-label">是</label>
                &emsp;
                <input type="radio" name="is-hu-bei" value="no" id="not-hu-bei" class="col-1 form-control">
                <label for="not-hu-bei" class="col-form-label">否</label>
            </div>
        </div>

        <div class="container h5">
            其他信息
        </div>
        <div class="container form">
            <div class="form-inline">
                <label for="is-wu-han" class="col-8 col-form-label">是否集中住宿务工人员:</label>
                <input type="radio" name="is-worker" value="yes" id="is-worker" class="col-1 form-control">
                <label for="is-worker" class="col-form-label">是</label>
                &emsp;
                <input type="radio" name="is-worker" value="no" id="not-worker" class="col-1 form-control">
                <label for="not-worker" class="col-form-label">否</label>
            </div>
            <div class="form-inline" id="company-info" style="display: none">
                <label for="company-name" class="col-5 col-form-label">企业名称:</label>
                <input type="text" name="company-name" id="company-name" class="col-7 form-control">
            </div>

            <div class="form-inline">
                <label for="is-wen-zhou" class="col-8 col-form-label">是否集中住宿在校学生:</label>
                <input type="radio" name="is-stu" value="yes" id="is-stu" class="col-1 form-control">
                <label for="is-stu" class="col-form-label">是</label>
                &emsp;
                <input type="radio" name="is-stu" value="no" id="not-stu" class="col-1 form-control">
                <label for="not-stu" class="col-form-label">否</label>
            </div>
            <div class="form-inline" id="school-info" style="display:none;">
                <label for="school-name" class="col-5 col-form-label">学校名称:</label>
                <input type="text" name="school-name" id="school-name" class="col-7 form-control">
            </div>

            <div class="form-inline">
                <label for="is-wen-zhou" class="col-8 col-form-label">是否宾馆酒店住宿客人:</label>
                <input type="radio" name="is-guest" value="yes" id="is-guest" class="col-1 form-control">
                <label for="is-guest" class="col-form-label">是</label>
                &emsp;
                <input type="radio" name="is-guest" value="no" id="not-guest" class="col-1 form-control">
                <label for="not-guest" class="col-form-label">否</label>
            </div>
            <div class="form-inline" id="hotel-info" style="display: none">
                <label for="hotel-name" class="col-5 col-form-label">酒店名称:</label>
                <input type="text" name="hotel-name" id="hotel-name" class="col-7 form-control">
            </div>
        </div>
        <div class="container form">
            <button type="submit" class="form-control btn-primary" id="submit">提交</button>
        </div>
    </form>
{% endblock %}